<style scoped>
.expand-row {
  margin-bottom: 8px;
}
</style>
<template>
    <div>
        <Row class="expand-row">
            <Col span="24">
                <span class="expand-key">网络拓扑: </span>
                <span class="expand-value">{{ convertAccess(row.access.topology) }}</span>
            </Col>
        </Row>
        <Row class="expand-row">
            <Col span="24">
                <span class="expand-key">性能监控: </span>
                <span class="expand-value">{{ convertAccess(row.access.performance) }}</span>
            </Col>
        </Row>
        <Row class="expand-row">
            <Col span="24">
                <span class="expand-key">故障处理: </span>
                <span class="expand-value">{{ convertAccess(row.access.event) }}</span>
            </Col>
        </Row>
        <Row class="expand-row">
            <Col span="24">
                <span class="expand-key">数据分析: </span>
                <span class="expand-value">{{ convertAccess(row.access.analysis) }}</span>
            </Col>
        </Row>
        <Row class="expand-row">
            <Col span="24">
                <span class="expand-key">知识库: </span>
                <span class="expand-value">{{ convertAccess(row.access.wiki) }}</span>
            </Col>
        </Row>
        <Row class="expand-row">
            <Col span="24">
                <span class="expand-key">权限管理: </span>
                <span class="expand-value">{{ convertAccess(row.access.access) }}</span>
            </Col>
        </Row>
    </div>
</template>
<script>
export default {
  props: {
    row: Object
  },
  data() {
    return {
      accessDict: {
        topology: "网络拓扑",
        "performance-AC": "AC性能监控",
        "performance-AP": "AP性能监控",
        "performance-client": "客户端性能监控",
        "performance-services": "服务性能监控",
        "event-process": "待处理故障",
        "event-history": "历史故障",
        "analysis-network": "全网状态分析",
        "analysis-AC": "AC状态分析",
        "analysis-AP": "AP状态分析",
        "analysis-client": "客户端状态分析",
        "analysis-event": "故障统计分析",
        wiki: "知识库",
        "access-role": "角色管理",
        "access-user": "用户管理"
      }
    };
  },
  methods: {
    convertAccess(access) {
      return access
        .map(item => {
          return this.accessDict[item];
        })
        .join(", ");
    }
  }
};
</script>